<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部导航</title>
    <!-- 网站图标 -->
    <link rel="icon" href="{% static 'images/favicon.svg' %}" type="image/svg+xml">
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
    <link href="{% static 'css/tailwind.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/fontawesome/all.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/animate.min.css' %}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            /* 主色调 */
            --primary-color: #4f46e5;
            --primary-hover: #4338ca;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            
            /* 深色主题 */
            --bg-dark: #0f172a;
            --bg-dark-secondary: #1e293b;
            --text-dark: #f8fafc;
            --text-dark-secondary: #94a3b8;
            --card-dark: #1e293b;
            --card-dark-hover: #334155;
            --card-dark-border: rgba(79, 70, 229, 0.2);
            --card-dark-glow: rgba(79, 70, 229, 0.15);
            --sidebar-dark: #0f172a;
            --sidebar-dark-hover: #1e293b;
            
            /* 浅色主题 */
            --bg-light: #f8fafc;
            --bg-light-secondary: #f1f5f9;
            --text-light: #1f2937;
            --text-light-secondary: #64748b;
            --card-light: #ffffff;
            --card-light-hover: #f8fafc;
            --light-icon-color: #6366f1;
            --light-icon-bg: #eef2ff;
            --light-icon-hover: #e0e7ff;
            --sidebar-light: #f1f5f9;
            --sidebar-light-hover: #e2e8f0;
            
            /* 通用 */
            --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            --card-hover: 0 10px 20px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --glow-color: rgba(79, 70, 229, 0.5);
            --border-radius: 12px;
            --sidebar-width: 240px;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            transition: var(--transition);
            scroll-behavior: smooth;
            letter-spacing: -0.01em;
            line-height: 1.5;
        }

        .theme-dark {
            background-color: var(--bg-dark);
            color: var(--text-dark);
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(79, 70, 229, 0.08) 0%, transparent 30%),
                radial-gradient(circle at 85% 30%, rgba(79, 70, 229, 0.08) 0%, transparent 30%),
                radial-gradient(circle at 50% 80%, rgba(79, 70, 229, 0.05) 0%, transparent 40%);
            background-attachment: fixed;
        }

        .theme-light {
            background-color: var(--bg-light);
            color: var(--text-light);
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(224, 231, 255, 0.6) 0%, transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(224, 231, 255, 0.6) 0%, transparent 25%);
            background-attachment: fixed;
        }

        .navbar {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: var(--transition);
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            margin: 0 12px;
            width: calc(100% - 24px);
        }

        .theme-dark .navbar {
            background-color: rgba(15, 23, 42, 0.75);
            border-bottom: 1px solid rgba(79, 70, 229, 0.2);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(79, 70, 229, 0.1);
        }

        .theme-light .navbar {
            background-color: rgba(248, 250, 252, 0.85);
            border-bottom: 1px solid rgba(99, 102, 241, 0.1);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.05);
        }

        .theme-toggle, .admin-link {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .theme-toggle::after, .admin-link::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .theme-toggle:hover::after, .admin-link:hover::after {
            opacity: 1;
        }

        .theme-dark .theme-toggle, .theme-dark .admin-link {
            background-color: rgba(79, 70, 229, 0.2);
            color: var(--text-dark);
            border: 1px solid rgba(79, 70, 229, 0.3);
        }

        .theme-dark .theme-toggle:hover, .theme-dark .admin-link:hover {
            background-color: rgba(79, 70, 229, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3), 0 0 0 1px rgba(79, 70, 229, 0.4);
        }
        
        /* 太阳图标使用金色 */
        .theme-dark .theme-toggle i.fa-sun {
            color: #fbbf24;
            filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.5));
        }
        
        /* 月亮图标使用深蓝色 */
        .theme-light .theme-toggle i.fa-moon {
            color: #4f46e5;
        }

        .theme-light .theme-toggle, .theme-light .admin-link {
            background-color: var(--light-icon-bg);
            color: var(--light-icon-color);
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        .theme-light .theme-toggle:hover, .theme-light .admin-link:hover {
            background-color: var(--light-icon-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.3);
        }

        .search-container {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
            width: 100%;
        }
        
        .search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-dark-secondary);
            pointer-events: none;
            transition: var(--transition);
        }
        
        .theme-light .search-icon {
            color: var(--text-light-secondary);
        }
        
        .search-box {
            transition: var(--transition);
            padding-left: 45px !important;
            border-radius: var(--border-radius) !important;
            height: 50px;
        }

        .theme-dark .search-box {
            background-color: var(--bg-dark-secondary);
            color: var(--text-dark);
            border: 1px solid rgba(79, 70, 229, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .theme-dark .search-box:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .theme-dark .search-box:focus + .search-icon {
            color: var(--primary-color);
        }

        .theme-light .search-box {
            background-color: white;
            color: var(--text-light);
            border: 1px solid rgba(99, 102, 241, 0.1);
            box-shadow: var(--card-shadow);
        }

        .theme-light .search-box:focus {
            border-color: var(--light-icon-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }
        
        .theme-light .search-box:focus + .search-icon {
            color: var(--light-icon-color);
        }

        .nav-link {
            transition: var(--transition);
            display: block;
            position: relative;
        }
        
        .nav-link::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--border-radius);
            padding: 1.5px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .theme-dark .nav-link:hover::before {
            opacity: 1;
        }
        
        .theme-light .nav-link:hover::before {
            opacity: 0.7;
        }

        .nav-card {
            height: 100%;
            border-radius: var(--border-radius);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .nav-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: linear-gradient(to bottom, rgba(79, 70, 229, 0.03), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .theme-dark .nav-card {
            background-color: var(--card-dark);
            border: 1px solid var(--card-dark-border);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .theme-dark .nav-link:hover .nav-card {
            background-color: var(--card-dark-hover);
            border-color: rgba(79, 70, 229, 0.4);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(79, 70, 229, 0.3);
            transform: translateY(-3px);
        }
        
        .theme-dark .nav-link:hover .nav-card::after {
            opacity: 1;
        }

        .theme-light .nav-card {
            background-color: var(--card-light);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(99, 102, 241, 0.08);
        }

        .theme-light .nav-link:hover .nav-card {
            box-shadow: var(--card-hover);
            transform: translateY(-3px);
            border-color: rgba(99, 102, 241, 0.2);
            background-color: var(--card-light-hover);
        }
        
        .theme-light .nav-link:hover .nav-card::after {
            opacity: 0.5;
            background: linear-gradient(to bottom, rgba(224, 231, 255, 0.5), transparent);
        }

        .nav-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .nav-card-icon img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        
        .nav-link:hover .nav-card-icon img {
            transform: scale(1.1);
        }

        .theme-dark .nav-card-icon {
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(55, 48, 163, 0.2));
            color: var(--primary-light);
            border: 1px solid rgba(79, 70, 229, 0.3);
        }
        
        .theme-dark .nav-card-icon::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .theme-dark .nav-link:hover .nav-card-icon {
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.25), rgba(55, 48, 163, 0.25));
            box-shadow: 0 0 15px var(--card-dark-glow);
            transform: translateY(-2px);
        }
        
        .theme-dark .nav-link:hover .nav-card-icon::after {
            opacity: 1;
        }
        
        .theme-dark .nav-link:hover .nav-card-icon i {
            text-shadow: 0 0 8px rgba(129, 140, 248, 0.5);
        }

        .theme-light .nav-card-icon {
            background-color: var(--light-icon-bg);
            color: var(--light-icon-color);
            border: 1px solid rgba(99, 102, 241, 0.15);
        }

        .theme-light .nav-link:hover .nav-card-icon {
            background-color: var(--light-icon-hover);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
        }

        .nav-card-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 4px;
            transition: var(--transition);
            position: relative;
            display: inline-block;
        }
        
        .nav-card-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            border-radius: 1px;
            transition: width 0.3s ease;
        }

        .theme-dark .nav-card-title {
            color: var(--text-dark);
        }
        
        .theme-dark .nav-card-title::after {
            background: linear-gradient(to right, var(--primary-color), var(--primary-light));
        }

        .theme-dark .nav-link:hover .nav-card-title {
            color: var(--primary-light);
        }
        
        .theme-dark .nav-link:hover .nav-card-title::after {
            width: 100%;
        }

        .theme-light .nav-card-title {
            color: var(--text-light);
        }
        
        .theme-light .nav-card-title::after {
            background: linear-gradient(to right, var(--light-icon-color), var(--primary-light));
        }

        .theme-light .nav-link:hover .nav-card-title {
            color: var(--primary-color);
        }
        
        .theme-light .nav-link:hover .nav-card-title::after {
            width: 100%;
        }

        .nav-card-desc {
            font-size: 14px;
            line-height: 1.5;
            transition: var(--transition);
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .theme-dark .nav-card-desc {
            color: var(--text-dark-secondary);
        }
        
        .theme-dark .nav-link:hover .nav-card-desc {
            color: rgba(148, 163, 184, 0.9);
        }

        .theme-light .nav-card-desc {
            color: var(--text-light-secondary);
        }
        
        .theme-light .nav-link:hover .nav-card-desc {
            color: rgba(71, 85, 105, 0.9);
        }

        .group-title-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .group-title {
            position: relative;
            padding-left: 14px;
            margin-bottom: 0;
            font-weight: 600;
            display: inline-block;
            font-size: 1.25rem;
        }

        .group-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            border-radius: 2px;
            background: var(--light-icon-color);
        }
        
        .group-title-line {
            flex: 1;
            height: 1px;
            margin-left: 15px;
            opacity: 0.2;
            background: linear-gradient(to right, var(--primary-color) 0%, transparent 100%);
        }

        .theme-dark .group-title {
            color: var(--text-dark);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .theme-dark .group-title::before {
            background: linear-gradient(to bottom, var(--primary-color), var(--primary-hover));
            box-shadow: 0 0 8px rgba(79, 70, 229, 0.5);
        }
        
        .theme-dark .group-title-line {
            background: linear-gradient(to right, var(--primary-color) 0%, transparent 100%);
        }

        .theme-light .group-title {
            color: var(--text-light);
        }
        
        .theme-light .group-title::before {
            background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
        }
        
        .theme-light .group-title-line {
            background: linear-gradient(to right, var(--primary-color) 0%, transparent 100%);
            opacity: 0.15;
        }

        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 100;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .theme-dark .back-to-top {
            background-color: rgba(59, 130, 246, 0.2);
            color: var(--text-dark);
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .theme-dark .back-to-top:hover {
            background-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(59, 130, 246, 0.1);
        }

        .theme-light .back-to-top {
            background-color: white;
            color: var(--light-icon-color);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .theme-light .back-to-top:hover {
            background-color: var(--light-icon-bg);
            color: var(--light-icon-color);
            transform: translateY(-3px);
            box-shadow: var(--card-hover);
        }

        .loader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--bg-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .theme-light .loader {
            background-color: var(--bg-light);
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        
        /* 顶部加载进度条 */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0;
            background: linear-gradient(to right, var(--primary-color), var(--primary-hover));
            z-index: 9999;
            transition: width 0.3s ease, opacity 0.5s ease;
        }
        
        /* 内容淡入效果 */
        .fade-in {
            opacity: 0;
            animation: fadeIn 0.6s ease-in-out forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 搜索匹配项高亮效果 */
        .search-matched .nav-card {
            box-shadow: 0 0 0 2px var(--primary-color);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
        
        /* 防闪烁处理 */
        .theme-light-init {
            background-color: var(--bg-light);
        }
        
        /* 访问性辅助类 */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }
        
        /* 搜索高亮样式 */
        mark {
            background-color: var(--highlight-color);
            color: var(--text-primary);
            padding: 0 2px;
            border-radius: 2px;
        }
        
        .search-matched .nav-card {
            border: 2px solid var(--highlight-color);
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .nav-card {
                padding: 15px;
            }
            
            .search-box {
                height: 44px;
                font-size: 16px;
            }
            
            .theme-toggle {
                width: 40px;
                height: 40px;
            }
        }
        
        /* 卡片过渡和动画效果 */
        .nav-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
        }
        
        .nav-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .theme-light .nav-card:hover {
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
        }
        
        .theme-dark .nav-card:hover {
            background-color: rgba(30, 41, 59, 0.8);
            box-shadow: 0 10px 25px rgba(30, 41, 59, 0.5);
        }
        
        /* 搜索框增强效果 */
        .search-container {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .search-container:focus-within {
            transform: scale(1.01);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
        }

        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid transparent;
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .theme-dark .loader-spinner {
            box-shadow: 0 0 15px var(--glow-color);
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            overflow-y: auto;
            transition: var(--transition);
            z-index: 40;
            padding-top: 80px;
            padding-bottom: 20px;
            scrollbar-width: thin;
        }
        
        .sidebar::-webkit-scrollbar {
            width: 4px;
        }
        
        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .sidebar::-webkit-scrollbar-thumb {
            background-color: rgba(79, 70, 229, 0.3);
            border-radius: 2px;
        }
        
        .theme-dark .sidebar {
            background-color: var(--sidebar-dark);
            border-right: 1px solid rgba(79, 70, 229, 0.1);
            box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        }
        
        .theme-light .sidebar {
            background-color: var(--sidebar-light);
            border-right: 1px solid rgba(99, 102, 241, 0.1);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.03);
        }
        
        .sidebar-category {
            padding: 0 16px;
            margin-bottom: 16px;
        }
        
        .sidebar-category-title {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 8px;
            padding-left: 12px;
            position: relative;
        }
        
        .sidebar-category-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            border-radius: 2px;
        }
        
        .theme-dark .sidebar-category-title {
            color: var(--text-dark);
        }
        
        .theme-dark .sidebar-category-title::before {
            background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
        }
        
        .theme-light .sidebar-category-title {
            color: var(--text-light);
        }
        
        .theme-light .sidebar-category-title::before {
            background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
        }
        
        .sidebar-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: var(--border-radius);
            margin-bottom: 4px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .sidebar-item.active {
            background: linear-gradient(90deg, rgba(79, 70, 229, 0.15), transparent);
        }
        
        .theme-dark .sidebar-item {
            color: var(--text-dark-secondary);
        }
        
        .theme-dark .sidebar-item:hover {
            background-color: var(--sidebar-dark-hover);
            color: var(--text-dark);
        }
        
        .theme-dark .sidebar-item.active {
            color: var(--primary-light);
        }
        
        .theme-light .sidebar-item {
            color: var(--text-light-secondary);
        }
        
        .theme-light .sidebar-item:hover {
            background-color: var(--sidebar-light-hover);
            color: var(--text-light);
        }
        
        .theme-light .sidebar-item.active {
            color: var(--primary-color);
        }
        
        .sidebar-item-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-size: 14px;
        }
        
        .sidebar-toggle {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 50;
            transition: var(--transition);
            display: none;
        }
        
        .theme-dark .sidebar-toggle {
            background-color: rgba(79, 70, 229, 0.2);
            color: var(--text-dark);
            border: 1px solid rgba(79, 70, 229, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .theme-dark .sidebar-toggle:hover {
            background-color: rgba(79, 70, 229, 0.3);
            transform: translateY(-2px);
        }
        
        .theme-light .sidebar-toggle {
            background-color: white;
            color: var(--light-icon-color);
            border: 1px solid rgba(99, 102, 241, 0.2);
            box-shadow: var(--card-shadow);
        }
        
        .theme-light .sidebar-toggle:hover {
            background-color: var(--light-icon-bg);
            transform: translateY(-2px);
        }
        
        /* 主内容区域调整 */
        .main-content {
            margin-left: var(--sidebar-width);
            transition: var(--transition);
            width: calc(100% - var(--sidebar-width));
        }
        
        .sidebar-collapsed .sidebar {
            transform: translateX(-100%);
        }
        
        .sidebar-collapsed .main-content {
            margin-left: 0;
            width: 100%;
        }
        
        /* 移动端适配 */
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
                box-shadow: none;
            }
            
            .sidebar-open .sidebar {
                transform: translateX(0);
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            }
            
            .main-content {
                margin-left: 0;
                width: 100%;
            }
            
            .sidebar-toggle {
                display: flex;
            }
            
            .sidebar-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 30;
                opacity: 0;
                visibility: hidden;
                transition: var(--transition);
            }
            
            .sidebar-open .sidebar-backdrop {
                opacity: 1;
                visibility: visible;
            }
            
            .toolbox {
                width: 100%;
                max-width: 100%;
                border-radius: 0;
            }
            
            .toolbox-body {
                flex-direction: column;
            }
            
            .toolbox-sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid rgba(79, 70, 229, 0.1);
                padding: 10px 15px;
                display: flex;
                flex-wrap: wrap;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .sidebar-tool-item {
                padding: 8px 12px;
                margin-right: 8px;
                border-radius: var(--border-radius);
            }
            
            .toolbox-content {
                padding: 15px;
            }
        }
    </style>
    <!-- @author Loganli -->
    <script>
    /**
     * @author Loganli
     * [导航系统] 模块化组织代码，提升可维护性和性能
     */
    (function() {
        // 防止闪烁，尽早应用保存的主题
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'light') {
            document.documentElement.classList.add('theme-light-init');
        }
    })();
    
    // 全局导航系统对象
    const NavSystem = {
        // DOM元素缓存
        elements: {},
        
        /**
         * 初始化全局导航系统
         */
        init: function() {
            // 缓存常用DOM元素
            this.cacheElements();
            
            // 初始化各模块
            this.theme.init();
            this.search.init();
            this.navigation.init();
            
            // 添加移动端优化
            this.initMobileOptimization();
            
            // 添加图片懒加载
            this.initLazyLoading();
            
            // 需要紧急被用户感知的状态
            console.log('导航系统初始化完成');
        },
        
        /**
         * 缓存常用DOM元素，减少重复查询
         */
        cacheElements: function() {
            this.elements.body = document.body;
            this.elements.themeToggle = document.getElementById('themeToggle');
            this.elements.searchBox = document.getElementById('searchBox');
            this.elements.navLinks = document.querySelectorAll('.nav-link');
            this.elements.navGroups = document.querySelectorAll('.nav-group');
            this.elements.mainContent = document.querySelector('.main-content');
        },
        
        /**
         * 主题相关功能
         */
        theme: {
            init: function() {
                const savedTheme = localStorage.getItem('theme');
                if (savedTheme === 'light') {
                    NavSystem.elements.body.className = 'theme-light';
                    NavSystem.elements.body.id = 'app';
                    const icon = NavSystem.elements.themeToggle.querySelector('i');
                    if (icon) icon.className = 'fas fa-sun';
                }
            },
            
            /**
             * 切换主题模式
             */
            toggle: function() {
                const body = NavSystem.elements.body;
                const icon = NavSystem.elements.themeToggle.querySelector('i');
                const mainContent = document.querySelector('.main-content');
                const sidebar = document.querySelector('.sidebar');
                
                // 切换主题
                const isDark = body.classList.contains('theme-dark');
                const newTheme = isDark ? 'theme-light' : 'theme-dark';
                const iconClass = isDark ? 'fas fa-sun' : 'fas fa-moon';
                
                // 更新所有需要主题的元素
                [body, mainContent, sidebar].forEach(el => {
                    if(el) {
                        el.classList.remove(isDark ? 'theme-dark' : 'theme-light');
                        el.classList.add(newTheme);
                    }
                });
                
                // 保持 ID
                body.id = 'app';
                
                // 更新图标
                if (icon) icon.className = iconClass;
                
                // 保存主题设置
                localStorage.setItem('theme', isDark ? 'light' : 'dark');
                
                // 触发重绘
                document.body.style.transition = 'background-color 0.3s ease';
                document.body.offsetHeight; // 强制重绘
            }
        },
        
        /**
         * 搜索相关功能
         */
        search: {
            // 搜索缓存
            cache: {
                lastTerm: '',
                originalTexts: {}
            },
            
            init: function() {
                const searchBox = NavSystem.elements.searchBox;
                if (!searchBox) return;
                
                // 缓存原始文本
                NavSystem.elements.navLinks.forEach(link => {
                    const title = link.querySelector('.nav-card-title');
                    const desc = link.querySelector('.nav-card-desc');
                    if (title) this.cache.originalTexts[link.dataset.name + '-title'] = title.textContent;
                    if (desc) this.cache.originalTexts[link.dataset.name + '-desc'] = desc.textContent;
                });
                
                // 添加防抖搜索事件
                searchBox.addEventListener('input', this.debounce(this.performSearch, 300));
            },
            
            /**
             * 执行搜索
             */
            performSearch: function() {
                const searchTerm = NavSystem.elements.searchBox.value.toLowerCase().trim();
                
                // 如果与上次搜索相同，跳过
                if (searchTerm === NavSystem.search.cache.lastTerm) return;
                NavSystem.search.cache.lastTerm = searchTerm;
                
                // 显示加载进度
                const progressBar = document.getElementById('progressBar');
                if (progressBar && searchTerm.length > 0) {
                    progressBar.style.opacity = '1';
                    progressBar.style.width = '50%';
                }
                
                // 搜索性能监控
                const startTime = performance.now();
                let visibleCount = 0;
                
                // 执行搜索匹配
                NavSystem.elements.navLinks.forEach(link => {
                    const name = link.getAttribute('data-name')?.toLowerCase() || '';
                    const desc = link.getAttribute('data-desc')?.toLowerCase() || '';
                    
                    if (searchTerm.length === 0 || name.includes(searchTerm) || desc.includes(searchTerm)) {
                        link.style.display = '';
                        link.classList.toggle('search-matched', searchTerm.length > 0);
                        visibleCount++;
                        
                        // 实现高亮匹配文本
                        if (searchTerm.length > 0) {
                            NavSystem.search.highlightMatches(link, searchTerm);
                        } else {
                            NavSystem.search.clearHighlights(link);
                        }
                    } else {
                        link.style.display = 'none';
                        link.classList.remove('search-matched');
                    }
                });
                
                // 更新分组可见性
                NavSystem.elements.navGroups.forEach(group => {
                    const hasVisibleLinks = Array.from(group.querySelectorAll('.nav-link')).some(link => 
                        link.style.display !== 'none'
                    );
                    group.style.display = hasVisibleLinks ? '' : 'none';
                });
                
                // 搜索完成，更新进度条
                if (progressBar) {
                    progressBar.style.width = '100%';
                    setTimeout(() => { progressBar.style.opacity = '0'; }, 300);
                }
                
                // 搜索性能日志
                const endTime = performance.now();
                if (endTime - startTime > 50) {
                    console.log(`搜索性能: ${(endTime - startTime).toFixed(2)}ms, 结果: ${visibleCount}`);
                }
            },
            
            /**
             * 高亮匹配文本
             */
            highlightMatches: function(link, searchTerm) {
                const titleEl = link.querySelector('.nav-card-title');
                const descEl = link.querySelector('.nav-card-desc');
                const name = link.getAttribute('data-name');
                
                if (titleEl && name) {
                    const originalTitle = this.cache.originalTexts[name + '-title'] || titleEl.textContent;
                    titleEl.innerHTML = this.getHighlightedText(originalTitle, searchTerm);
                }
                
                if (descEl) {
                    const originalDesc = this.cache.originalTexts[name + '-desc'] || descEl.textContent;
                    descEl.innerHTML = this.getHighlightedText(originalDesc, searchTerm);
                }
            },
            
            /**
             * 清除高亮
             */
            clearHighlights: function(link) {
                const titleEl = link.querySelector('.nav-card-title');
                const descEl = link.querySelector('.nav-card-desc');
                const name = link.getAttribute('data-name');
                
                if (titleEl && name && this.cache.originalTexts[name + '-title']) {
                    titleEl.textContent = this.cache.originalTexts[name + '-title'];
                }
                
                if (descEl && name && this.cache.originalTexts[name + '-desc']) {
                    descEl.textContent = this.cache.originalTexts[name + '-desc'];
                }
            },
            
            /**
             * 生成高亮文本
             */
            getHighlightedText: function(text, searchTerm) {
                if (!searchTerm) return text;
                const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
                return text.replace(regex, '<mark>$1</mark>');
            },
            
            /**
             * 防抖函数
             */
            debounce: function(func, wait) {
                let timeout;
                return function() {
                    const context = this, args = arguments;
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(context, args), wait);
                };
            }
        },
        
        /**
         * 导航相关功能
         */
        navigation: {
            init: function() {
                // 实现事件委托，减少事件监听器
                NavSystem.elements.mainContent.addEventListener('click', function(e) {
                    // 拦截导航链接点击，添加过渡动画
                    const navLink = e.target.closest('.nav-link');
                    if (navLink && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
                        // 点击分析
                        const name = navLink.getAttribute('data-name');
                        const url = navLink.getAttribute('href');
                        if (name && url) {
                            console.log(`跳转到: ${name}`);
                        }
                    }
                });
            }
        },
        
        /**
         * 移动端优化
         */
        initMobileOptimization: function() {
            // 监听屏幕大小变化
            const handleResize = this.debounce(function() {
                if (window.innerWidth > 1024) {
                    NavSystem.elements.body.classList.remove('sidebar-open');
                }
                // 适配移动端尺寸
                document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
            }, 150);
            
            window.addEventListener('resize', handleResize);
            handleResize();
            
            // 移动端触摸优化，使用被动事件
            document.addEventListener('touchstart', function(){}, {passive: true});
        },
        
        /**
         * 图片懒加载
         */
        initLazyLoading: function() {
            // 使用IntersectionObserver实现懒加载
            if ('IntersectionObserver' in window) {
                const lazyImages = document.querySelectorAll('img[data-src]');
                if (lazyImages.length === 0) return;
                
                const imageObserver = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.removeAttribute('data-src');
                            imageObserver.unobserve(img);
                        }
                    });
                });
                
                lazyImages.forEach(img => imageObserver.observe(img));
            }
        },
        
        /**
         * 防抖函数
         */
        debounce: function(func, wait) {
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }
    };
    
    // 页面加载后初始化
    document.addEventListener('DOMContentLoaded', function() {
        NavSystem.init();
    });
    
    // 公开全局函数
    function toggleTheme() {
        NavSystem.theme.toggle();
    }
    </script>
</head>
<body class="theme-dark" id="app">
    <!-- 顶部加载进度条 -->
    <div class="progress-bar" id="progressBar"></div>
    
    <!-- 加载动画 -->
    <div class="loader">
        <div class="loader-spinner"></div>
    </div>
    
    <!-- 导航栏 -->
    <nav class="navbar fixed top-0 left-0 right-0 z-50 px-5 py-4 flex items-center justify-between">
        <div class="flex items-center">
            <div class="text-xl font-bold">内部导航</div>
            <div class="hidden md:block ml-4 text-sm opacity-70">高效工作的起点</div>
        </div>
        <div class="flex items-center space-x-3">
            <button class="theme-toggle" id="themeToggle" aria-label="切换主题" onclick="toggleTheme()">
                <i class="fas fa-moon" aria-hidden="true"></i>
                <span class="sr-only">切换主题</span>
            </button>
            <a href="/admin/" class="admin-link" title="管理后台">
                <i class="fas fa-cog"></i>
            </a>
        </div>
    </nav>
    
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-category">
            <div class="sidebar-category-title">导航分类</div>
            <div class="sidebar-items">
                <div class="sidebar-item active" data-category="all">
                    <div class="sidebar-item-icon"><i class="fas fa-th"></i></div>
                    <div>全部导航</div>
                </div>
                {% for group in groups %}
                <div class="sidebar-item" data-category="{{ group.title }}">
                    <div class="sidebar-item-icon">
                        <i class="fas fa-folder"></i>
                    </div>
                    <div>{{ group.title }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        

    </div>
    
    <!-- 移动端侧边栏切换按钮 -->
    <div class="sidebar-toggle" id="sidebarToggle" title="切换侧边栏">
        <i class="fas fa-bars"></i>
    </div>
    
    <!-- 移动端遮罩 -->
    <div class="sidebar-backdrop" id="sidebarBackdrop"></div>
    
    <!-- 主内容区 -->
    <div class="main-content">
        <div class="container mx-auto px-4 pt-24 pb-16 max-w-6xl">
        <!-- 搜索框 -->
        <div class="mb-10 flex justify-center">
            <div class="search-container">
                <input type="text" id="searchBox" placeholder="搜索..." class="search-box w-full px-4 py-3 rounded-lg outline-none">
                <i class="fas fa-search search-icon"></i>
            </div>
        </div>

        <!-- 导航分组 -->
        {% for group in groups %}
        <div class="mb-12 nav-group animate__animated animate__fadeIn" style="animation-delay: calc({{ forloop.counter0 }} * 0.1s);">
            <div class="group-title-container">
                <h2 class="group-title">{{ group.title }}</h2>
                <div class="group-title-line"></div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
                {% for link in group.links %}
                <a href="{{ link.url }}" target="_blank" class="nav-link" data-name="{{ link.name }}" data-desc="{{ link.description }}">
                    <div class="nav-card p-4 flex items-start hover:shadow-lg">
                        <div class="nav-card-icon mr-3">
                            {% if link.icon_image_base64 %}
                                <img src="data:{{ link.icon_image_type }};base64,{{ link.icon_image_base64 }}" alt="{{ link.name }}">
                            {% elif link.icon %}
                                <i class="{{ link.icon }}"></i>
                            {% else %}
                                <i class="fas fa-link"></i>
                            {% endif %}
                        </div>
                        <div class="flex-1 overflow-hidden">
                            <h3 class="nav-card-title truncate">{{ link.name }}</h3>
                            <p class="nav-card-desc">{{ link.description }}</p>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
        </div>

        <!-- 回到顶部按钮 -->
        <div class="back-to-top" id="backToTop" title="回到顶部">
            <i class="fas fa-arrow-up"></i>
        </div>
        
        <!-- 页脚 -->
    <footer class="text-center py-6 text-sm opacity-70">
        <p>© {{ now.year }} 内部导航系统 | <a href="/admin/" class="hover:underline">管理后台</a></p>
    </footer>
    
    </div>

    <script>
        /**
         * @author Loganli
         * [公共函数] 防抖函数实现
         * 延迟执行函数，防止频繁调用
         */
        function debounce(func, wait) {
            if (typeof func !== 'function') {
                console.error('防抖函数参数错误：第一个参数必须是函数');
                return function() {};
            }
            
            wait = parseInt(wait) || 300; // 设置默认值和类型转换
            
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    try {
                        func.apply(context, args);
                    } catch (error) {
                        console.error('防抖函数执行错误:', error);
                    }
                }, wait);
            };
        }
        
        /**
         * @author Loganli
         * [公共函数] 安全获取DOM元素
         * 防止因元素不存在导致的错误
         */
        function safeGetElement(selector) {
            try {
                return document.querySelector(selector);
            } catch (error) {
                console.error(`获取元素错误 [${selector}]:`, error);
                return null;
            }
        }
        
        /**
         * @author Loganli
         * [页面初始化] 智能加载状态管理和内容同步
         * 实现加载进度反馈、图片加载跟踪和错误处理
         */
        document.addEventListener('DOMContentLoaded', function() {
            try {
                // 加载状态跟踪
                let pageLoadTimeout;
                let loadingComplete = false;
                
                // 初始化进度条
                const progressBar = safeGetElement('#progressBar');
                if (progressBar) {
                    updateProgress(30);
                    setTimeout(() => updateProgress(60), 100);
                    setTimeout(() => updateProgress(80), 200);
                }
                
                // 设置安全网，确保页面最终能完成加载
                const maxLoadingTime = 5000; // 最长等待5秒
                const safetyTimeout = setTimeout(() => {
                    if (!loadingComplete) {
                        console.warn('加载超时，强制完成加载过程');
                        completeLoading(true);
                    }
                }, maxLoadingTime);
                
                // 监听图片加载状态
                let imagesLoaded = 0;
                let imagesErrored = 0;
                const images = document.querySelectorAll('img');
                const totalImages = images.length;
                
                // 更新进度条函数
                function updateProgress(percent) {
                    if (!progressBar) return;
                    try {
                        progressBar.style.width = percent + '%';
                    } catch (error) {
                        console.error('更新进度条错误:', error);
                    }
                }
                
                // 如果没有图片，使用延迟加载提升体验
                if (totalImages === 0) {
                    pageLoadTimeout = setTimeout(() => completeLoading(), 600);
                } else {
                    // 监听每个图片加载状态
                    images.forEach(img => {
                        try {
                            if (img.complete) {
                                imageLoaded();
                            } else {
                                img.addEventListener('load', imageLoaded);
                                img.addEventListener('error', () => {
                                    imagesErrored++;
                                    console.warn(`图片加载失败: ${img.src || '未设置源'}`);
                                    imageLoaded();
                                });
                            }
                        } catch (error) {
                            console.error('监听图片加载错误:', error);
                            imageLoaded(); // 出错也计数，确保最终能完成加载
                        }
                    });
                }
                
                // 图片加载计数器
                function imageLoaded() {
                    imagesLoaded++;
                    if (progressBar) {
                        // 计算当前进度，保留前80%为初始加载进度
                        const percent = 80 + ((imagesLoaded / totalImages) * 20);
                        updateProgress(Math.min(99, percent)); // 最高显示99%，留下1%给完成加载时显示
                    }
                    
                    // 所有图片都已处理(加载成功或失败)
                    if (imagesLoaded >= totalImages) {
                        const delay = calculateOptimalDelay();
                        clearTimeout(pageLoadTimeout);
                        pageLoadTimeout = setTimeout(() => completeLoading(), delay);
                    }
                }
                
                // 根据图片情况计算最佳延迟
                function calculateOptimalDelay() {
                    // 如果有太多图片出错，缩短等待时间
                    const errorRate = imagesErrored / totalImages;
                    if (errorRate > 0.3) { // 超过30%错误率
                        return 300;
                    }
                    
                    // 根据图片数量调整等待时间，但设置上下限
                    return Math.min(800, Math.max(300, totalImages * 40));
                }
                
                // 完成加载处理
                function completeLoading(forced = false) {
                    if (loadingComplete) return; // 防止重复执行
                    loadingComplete = true;
                    
                    clearTimeout(safetyTimeout);
                    clearTimeout(pageLoadTimeout);
                    
                    try {
                        // 强制加载完成时打印警告
                        if (forced) {
                            console.warn(`强制完成加载: 总图片${totalImages}个, 已加载${imagesLoaded}个, 错误${imagesErrored}个`);
                        }
                        
                        // 进度条完成
                        if (progressBar) {
                            updateProgress(100);
                        }
                        
                        // 隐藏加载动画
                        const loader = safeGetElement('.loader');
                        if (loader) {
                            loader.classList.add('hidden');
                        }
                        
                        // 隐藏进度条
                        setTimeout(() => {
                            if (progressBar) {
                                progressBar.style.opacity = '0';
                            }
                        }, 500);
                    } catch (error) {
                        console.error('完成加载处理错误:', error);
                        // 出错时强制隐藏加载器
                        try {
                            const loader = safeGetElement('.loader');
                            if (loader) loader.style.display = 'none';
                        } catch (e) {}
                    }
                }
            } catch (error) {
                console.error('页面初始化错误:', error);
                // 页面级别错误处理，确保加载器隐藏
                try {
                    const loader = document.querySelector('.loader');
                    if (loader) loader.style.display = 'none';
                } catch (e) {}
            }

            const body = document.body;
            const themeToggle = document.getElementById('themeToggle');
            const searchBox = document.getElementById('searchBox');
            const backToTop = document.getElementById('backToTop');
            const navLinks = document.querySelectorAll('.nav-link');
            const navGroups = document.querySelectorAll('.nav-group');
            const sidebarToggle = document.getElementById('sidebarToggle');
            const sidebarBackdrop = document.getElementById('sidebarBackdrop');
            
            // 主题切换
            if (themeToggle) {
                themeToggle.addEventListener('click', function() {
                    body.classList.toggle('theme-dark');
                    body.classList.toggle('theme-light');
                    localStorage.setItem('theme', body.classList.contains('theme-dark') ? 'dark' : 'light');
                    
                    // 更新图标
                    const icon = themeToggle.querySelector('i');
                    if (icon) {
                        icon.className = body.classList.contains('theme-dark') ? 'fas fa-sun' : 'fas fa-moon';
                    }
                });
            }

            // 从本地存储中恢复主题设置
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme) {
                if (savedTheme === 'light') {
                    body.classList.remove('theme-dark');
                    body.classList.add('theme-light');
                } else {
                    body.classList.remove('theme-light');
                    body.classList.add('theme-dark');
                }
                // 更新图标
                const icon = themeToggle?.querySelector('i');
                if (icon) {
                    icon.className = body.classList.contains('theme-dark') ? 'fas fa-sun' : 'fas fa-moon';
                }
            }
            
            // 添加当前年份到页脚
            const footerYear = document.querySelector('footer p');
            if (footerYear) {
                footerYear.innerHTML = footerYear.innerHTML.replace('{{ now.year }}', new Date().getFullYear());
            }

            // 侧边栏切换
            if (sidebarToggle) {
                sidebarToggle.addEventListener('click', function() {
                    body.classList.toggle('sidebar-open');
                });
            }
            
            // 点击遮罩关闭侧边栏
            if (sidebarBackdrop) {
                sidebarBackdrop.addEventListener('click', function() {
                    body.classList.remove('sidebar-open');
                });
            }
            
            // 侧边栏分类筛选功能
            const sidebarItems = document.querySelectorAll('.sidebar-item[data-category]');
            if (sidebarItems && sidebarItems.length > 0) {
                sidebarItems.forEach(item => {
                    item.addEventListener('click', function() {
                        // 移除其他项目的激活状态
                        sidebarItems.forEach(i => i.classList.remove('active'));
                        // 激活当前项目
                        this.classList.add('active');
                        
                        const category = this.getAttribute('data-category');
                        
                        // 如果是全部，显示所有分组
                        if (category === 'all') {
                            navGroups.forEach(group => {
                                group.style.display = '';
                            });
                        } else {
                            // 否则只显示选中的分组
                            navGroups.forEach(group => {
                                const groupTitleEl = group.querySelector('.group-title');
                                const groupTitle = groupTitleEl ? groupTitleEl.textContent : '';
                                if (groupTitle === category) {
                                    group.style.display = '';
                                } else {
                                    group.style.display = 'none';
                                }
                            });
                        }
                        
                        // 在移动端上点击后关闭侧边栏
                        if (window.innerWidth <= 1024) {
                            body.classList.remove('sidebar-open');
                        }
                    });
                });
            }
            
            /**
             * @author Loganli
             * [搜索功能] 实现实时搜索和结果高亮
             * 使用防抖优化性能，增加错误处理保障应用稳定性
             */
            if (searchBox) {
                // 初始化搜索记录
                let lastSearchTerm = '';
                let searchResultsCount = 0;
                
                // 添加搜索事件监听器
                searchBox.addEventListener('input', debounce(function() {
                    try {
                        // 获取搜索关键词并预处理
                        const searchTerm = (this.value || '').toLowerCase().trim();
                        
                        // 如果与上次搜索相同，不重复处理
                        if (searchTerm === lastSearchTerm) return;
                        lastSearchTerm = searchTerm;
                        
                        // 更新进度指示器
                        const progressBar = safeGetElement('#progressBar');
                        if (progressBar && searchTerm.length > 0) {
                            progressBar.style.opacity = '1';
                            progressBar.style.width = '50%';
                        }
                        
                        // 搜索开始时间，用于性能跟踪
                        const searchStartTime = performance.now();
                        searchResultsCount = 0;
                        
                        // 如果没有导航链接，提前结束
                        if (!navLinks || navLinks.length === 0) {
                            console.warn('搜索器未找到导航链接元素');
                            return;
                        }
                        
                        // 搜索所有导航链接
                        navLinks.forEach(link => {
                            try {
                                const name = (link.getAttribute('data-name') || '').toLowerCase();
                                const desc = (link.getAttribute('data-desc') || '').toLowerCase();
                                
                                // 实现模糊搜索匹配
                                const isMatch = searchTerm.length === 0 || 
                                    name.includes(searchTerm) || 
                                    desc.includes(searchTerm);
                                
                                if (isMatch) {
                                    link.style.display = '';
                                    searchResultsCount++;
                                    
                                    // 只在有搜索关键词时应用高亮效果
                                    if (searchTerm.length > 0) {
                                        link.classList.add('search-matched');
                                    } else {
                                        link.classList.remove('search-matched');
                                    }
                                } else {
                                    link.style.display = 'none';
                                    link.classList.remove('search-matched');
                                }
                            } catch (error) {
                                console.error('搜索单个链接出错:', error);
                                // 出错时默认显示该链接
                                link.style.display = '';
                            }
                        });
                        
                        // 更新分组显示状态
                        try {
                            if (navGroups && navGroups.length > 0) {
                                navGroups.forEach(group => {
                                    try {
                                        const links = group.querySelectorAll('.nav-link');
                                        // 使用更高效的方法检查是否有可见链接
                                        const hasVisibleLinks = Array.from(links).some(link => 
                                            link.style.display !== 'none'
                                        );
                                        group.style.display = hasVisibleLinks ? '' : 'none';
                                    } catch (groupError) {
                                        console.error('处理分组显示状态错误:', groupError);
                                        // 出错时默认显示该分组
                                        group.style.display = '';
                                    }
                                });
                            }
                        } catch (groupsError) {
                            console.error('处理分组列表错误:', groupsError);
                        }
                        
                        // 搜索性能跟踪
                        const searchEndTime = performance.now();
                        const searchTime = searchEndTime - searchStartTime;
                        if (searchTime > 100) { // 记录慢查询
                            console.log(`搜索性能: ${searchTime.toFixed(2)}ms, 关键词: ${searchTerm}, 结果: ${searchResultsCount}`);
                        }
                        
                        // 搜索完成后隐藏进度条
                        if (progressBar) {
                            progressBar.style.width = '100%';
                            setTimeout(() => {
                                progressBar.style.opacity = '0';
                            }, 300);
                        }
                    } catch (error) {
                        console.error('搜索功能执行错误:', error);
                        // 发生错误时重置搜索状态
                        navLinks.forEach(link => {
                            try { link.style.display = ''; } catch (e) {}
                        });
                        navGroups.forEach(group => {
                            try { group.style.display = ''; } catch (e) {}
                        });
                    }
                }, 300));
            }

            /**
             * @author Loganli
             * [主题切换] 简化实现确保可靠性
             */
            if (themeToggle) {
                // 主题切换点击事件
                themeToggle.addEventListener('click', function() {
                    console.log('点击了主题切换按钮');
                    // 检查当前主题
                    const isDark = document.body.classList.contains('theme-dark');
                    console.log('当前是黑色主题？', isDark);
                    
                    // 切换主题
                    if (isDark) {
                        // 从黑色切换到白色
                        document.body.className = 'theme-light';
                        console.log('已切换到白色主题');
                        
                        // 显示太阳图标
                        const icon = themeToggle.querySelector('i');
                        if (icon) icon.className = 'fas fa-sun';
                        
                        // 保存为白色主题
                        try { localStorage.setItem('theme', 'light'); } catch (e) {}
                    } else {
                        // 从白色切换到黑色
                        document.body.className = 'theme-dark';
                        console.log('已切换到黑色主题');
                        
                        // 显示月亮图标
                        const icon = themeToggle.querySelector('i');
                        if (icon) icon.className = 'fas fa-moon';
                        
                        // 保存为黑色主题
                        try { localStorage.setItem('theme', 'dark'); } catch (e) {}
                    }
                });
                
                // 确保文档加载完成后执行
                document.addEventListener('DOMContentLoaded', function() {
                    // 检查当前元素是否有黑色主题
                    const hasDarkClass = document.body.classList.contains('theme-dark');
                    console.log('默认是黑色主题？', hasDarkClass);
                    
                    // 更新图标状态
                    const icon = themeToggle.querySelector('i');
                    if (icon) {
                        if (hasDarkClass) {
                            icon.className = 'fas fa-moon';
                        } else {
                            icon.className = 'fas fa-sun';
                        }
                    }
                    
                    // 从本地存储中加载主题设置
                    try {
                        const savedTheme = localStorage.getItem('theme');
                        console.log('存储的主题是:', savedTheme);
                        
                        if (savedTheme === 'light') {
                            document.body.className = 'theme-light';
                            if (icon) icon.className = 'fas fa-sun';
                        } else if (savedTheme === 'dark') {
                            document.body.className = 'theme-dark';
                            if (icon) icon.className = 'fas fa-moon';
                        }
                    } catch (e) {
                        console.warn('无法加载主题设置');
                    }
                });
            }
            
            /**
             * @author Loganli
             * [返回顶部] 平滑滚动和视图响应
             */
            if (backToTop) {
                try {
                    // 使用防抖函数优化滚动事件处理
                    window.addEventListener('scroll', debounce(function() {
                        try {
                            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                            backToTop.classList.toggle('visible', scrollTop > 300);
                        } catch (error) {
                            console.error('处理滚动事件错误:', error);
                        }
                    }, 100));

                    // 添加点击事件监听器
                    backToTop.addEventListener('click', function(e) {
                        try {
                            e.preventDefault();
                            window.scrollTo({
                                top: 0,
                                behavior: 'smooth'
                            });
                        } catch (error) {
                            console.error('返回顶部错误:', error);
                            // 如果平滑滚动失败，使用快速跳转
                            try { window.scrollTo(0, 0); } catch (e) {}
                        }
                    });
                } catch (error) {
                    console.error('初始化返回顶部功能错误:', error);
                }
            }
            
            /**
             * @author Loganli
             * [响应式调整] 优化移动端体验
             */
            try {
                // 使用防抖函数减少重复调用
                const handleResize = debounce(function() {
                    try {
                        const width = window.innerWidth || document.documentElement.clientWidth;
                        if (width > 1024) {
                            body.classList.remove('sidebar-open');
                        }
                        
                        // 可执行其他响应式调整逻辑...
                    } catch (error) {
                        console.error('窗口调整处理错误:', error);
                    }
                }, 150);
                
                window.addEventListener('resize', handleResize);
                // 初始调用一次确保正确状态
                handleResize();
            } catch (error) {
                console.error('初始化响应式调整错误:', error);
            }
        });
    </script>
    <script src="{% static 'js/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'js/fontawesome/all.min.js' %}"></script>
</body>
</html>
